<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" import="java.util.*, com.bean.library.Course, com.bean.library.Teacher"%>
<jsp:useBean id="teacher" class="com.bean.library.Teacher" scope="session"></jsp:useBean>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
	String teacherName = teacher.getTeacherName();
%>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="../t_css/t_welcome.css" type="text/css" />
    <link rel="stylesheet" href="../t_css/t_common.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery.animate-colors-min.js"></script>
    <script type="text/javascript" src="../t_scripts/t_navi_common.js"></script>
    <script type="text/javascript" src="../scripts/jquery.flippy.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#welcome_logo").hover(function () {
                $(this).animate({ backgroundColor: '#30A8F4' }, { speed: 1000, queue: false });
            }, function () {
                $(this).animate({ backgroundColor: '#F65314' }, { speed: 1000, queue: false });
            });

            ////////////////////////////////////翻转效果//////////////////////////////////////
            var hasFilped1 = false;
            var inNavi1 = false;
            var hasFilped2 = false;
            var inNavi2 = false;
            $("#welcome_navi_set").mouseover(function () {
                $("#welcome_operate_type").val("setques");
            	inNavi1 = true;
                if (hasFilped1 == false) {
                    $(this).flippy({
                        color_target: '#75AF1C',
                        content: "Click Start!",
                        direction: "RIGHT",
                        duration: "500",
                        onStart: function () {
                            $('#set_questions_intro').slideDown(500);
                        },
                        onFinish: function () {
                            hasFilped1 = true;
                            if (inNavi1 == true) {

                            }
                            else if (inNavi1 == false) {
                                $('#welcome_navi_set').flippy({
                                    color_target: '#75AF1C',
                                    content: 'Set Questions',
                                    direction: "LEFT",
                                    duration: "500",
                                    onStart: function () {
                                        $('#set_questions_intro').slideUp(500);
                                    },
                                    onFinish: function () {
                                        hasFilped1 = false;
                                    }
                                });
                            }
                        }
                    });
                }
            });
            $("#welcome_navi_set").mouseout(function () {
                if (hasFilped1 == true) {
                    $('#welcome_navi_set').flippy({
                        color_target: '#75AF1C',
                        content: 'Set Questions',
                        direction: "LEFT",
                        duration: "500",
                        onStart: function () {
                            $('#set_questions_intro').slideUp(500);
                        },
                        onFinish: function () {
                            hasFilped1 = false;
                        }
                    });
                }
                inNavi1 = false;
            });
            //////////////////////////////////////////////////////////////////////////
            $("#welcome_navi_analysis").mouseover(function () {
            	$("#welcome_operate_type").val("checkpaper");
            	inNavi2 = true;
                if (hasFilped2 == false) {
                    $(this).flippy({
                        color_target: '#279FEB',
                        content: "Click Start!",
                        direction: "RIGHT",
                        duration: "500",
                        onStart: function () {
                            $('#paper_analysis_intro').slideDown(500);
                        },
                        onFinish: function () {
                            hasFilped2 = true;
                            if (inNavi2 == true) {

                            }
                            else if (inNavi2 == false) {
                                $('#welcome_navi_analysis').flippy({
                                    color_target: '#279FEB',
                                    content: 'Check Paper',
                                    direction: "LEFT",
                                    duration: "500",
                                    onStart: function () {
                                        $('#paper_analysis_intro').slideUp(500);
                                    },
                                    onFinish: function () {
                                        hasFilped2 = false;
                                    }
                                });
                            }
                        }
                    });
                }
            });
            $("#welcome_navi_analysis").mouseout(function () {
                if (hasFilped2 == true) {
                    $('#welcome_navi_analysis').flippy({
                        color_target: '#279FEB',
                        content: 'Check Paper',
                        direction: "LEFT",
                        duration: "500",
                        onStart: function () {
                            $('#paper_analysis_intro').slideUp(500);
                        },
                        onFinish: function () {
                            hasFilped2 = false;
                        }
                    });
                }
                inNavi2 = false;
            });
            //////////////////////////////////////////////////////////////////////////
            $('#welcome_navi_set').click(function () {
                //window.location.href = "t_setques.htm";
                $("#welcome_form").submit();
            });
            $('#welcome_navi_analysis').click(function () {
                //window.location.href = "t_checkpaper.htm";
            	$("#welcome_form").submit();
            });
        });
    </script>
</head>
<body>
<div id="bigContent">
<div id="head">
    <div id="title">
        <div class="title_left">
            <div class="titleText">Students Online Exam Platform ( For Teacher )</div>
        </div>
        <div class="title_right">
            <div class="avatar"><img src="../image/noavatar.jpg" alt="../image/noavatar.jpg"/></div>
            <div class="userState">
                <div class="userState_big"><a href="#"><%=teacherName %></a></div>
                <div class="userState_small"><a href="/Exam1/servlet/TLogoutServlet">logout</a></div>
            </div>
        </div>
    </div>
    <div id="navi">
    <form id="navi_form" action="/Exam1/servlet/TNaviSelectServlet" method="post">
        <div class="navi_top">
            <ul class="all_navi">
            	<li id="navi1" class="each_navi navi1">Set Questions</li>
                <li id="navi2" class="each_navi navi2">Check Paper</li>
            </ul>
        </div>
        <div class="navi_bottom">
            <ul class="all_courses">
            	<%
            	ArrayList<Course> teacherCourseList = teacher.getTeacherCourseList();
            	Iterator<Course> teacherCourseIt = teacherCourseList.iterator();
            	int courseNum = 0;
            	while(teacherCourseIt.hasNext()){
            		courseNum++;
            		Course course = teacherCourseIt.next();
            		String courseName = course.getCourseName();
            		String courseId = course.getCourseId();
            	
            	%>
            	<li class="each_course course<%=courseNum%>" id="<%=courseId%>"><%=courseName %></li>
            	<%} %>
            </ul>
        </div>
        <input type="hidden" id="operate_type" name="operate_type" value=""/>
        <input type="hidden" id="course_id" name="course_id" value=""/>
        <input type="hidden" id="course_name" name="course_name" value=""/>
    </form>    
    </div>
</div>
<div id="content_welcome"  class="boxShadow">
    <div id="welcome_logo">Welcome</div>
    <div id="welcome_content">
        <div id="welcome_title">Welcome to Students Online Exam Platform for Teacher</div>
        <div id="welcome_text">Dear Mr.Teacher1, Now, you can use this platform to set 
        your exam questions or do some analysis for each paper. It's useful for your work and we believe your will enjoy it!</div>
    </div>
    <form id="welcome_form" method="post" action="/Exam1/servlet/TNaviSelectServlet">
	    <div id="welcome_navi">
	        <div id="welcome_navi_set" class="welcome_each_navi">Set Questions</div>
	        <div id="welcome_navi_analysis" class="welcome_each_navi">Check Paper</div>
	    </div>
   	    <input type="hidden" value="" name="operate_type" id="welcome_operate_type"/>
        <input type="hidden" id="course_id" name="course_id" value=""/>
        <input type="hidden" id="course_name" name="course_name" value=""/>
	</form>    
    <div id="welcome_navi_intro">
        <div id="set_questions_intro" class="welcome_each_intro">This section is your set question platform, 
         you can set your exam questions and make up papers on it. </div>
        <div id="paper_analysis_intro" class="welcome_each_intro">In the section, you will see some informations about each paper
        you make, like students's grades, correct answer fill rate and so on</div>
    </div>   
</div>
</div>
</body>
</html>